<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
    <script>
        // 什么是事件?
        // 目的: 捕获用户的行为,根据用户的行为做出一系列的操作 
        // 开发的时候,提前约定好,用户只要做了哪些操作,就会执行对应的代码 
        // btn.onclick = function(){
        //     alert('用户点击了 我被执行了');
        // }

        // 事件三要素
        // btn 事件源 绑定在谁身上 
        // click 事件类型  什么事件 
        // function 事件处理函数  当捕获到用户的点击行为  这个函数被执行



        //  btn.onclick = function(){
        //     alert('用户点击了 我被执行了');
        //  }

        //  btn.onclick = function(){
        //     alert('用户点击我也被执行');
        //  }


        // 事件绑定有两个级别?

        // dom0 
        // 下面这种就是dom0  
        //  btn.onclick = function(){
        //     alert('用户点击了 我被执行了');
        //  }
        // 有局限  同一个事件源 同一个事件类型 只能绑定一个事件处理函数 


        // dom2 
        // 于是发明了dom2  
        // 可以给 同一个事件源 同一个事件类型 能绑定多个事件处理函数
        // 顺序绑定  顺序执行
        
        //  事件源.addEventListener('事件类型',事件处理函数)

        // 会涉及到浏览器的兼容性  
        // ie浏览器  
        //  事件源.attachEvent('on+事件类型',事件处理函数)
        
        //  // 可以给 同一个事件源 同一个事件类型 绑定多个事件处理函数
        // 顺序绑定  倒序执行

        // 这也是咱们遇到的第二个兼容性问题  
        // 




        // dom3 
        // dom2的升级版 



        // dom2的绑定方式  

        function haha(){
            alert('老铁666')
        }

        // btn.addEventListener('click',function(){
        //     alert('礼物走一走')
        // });

        // btn.addEventListener('click',haha);



        // btn.attachEvent('onclick',function(){
        //     alert('礼物走一走')
        // });

        // btn.attachEvent('onclick',haha);



        
    </script>
</body>
</html>